<!DOCTYPE html>
<html lang="zh" ng-app="MyApp" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改订单信息')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <!--    <link rel="stylesheet" type="text/css" th:href="@{/js/googleMap/style.css}">-->
    <!--    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <!--    <script th:src="@{/js/googleMap/angular-google-maps-native.min.js}"></script>-->
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-order-edit" th:object="${ddOrder}">
        <div class="row">
            <div class="col-sm-6">
                <input name="uuid" th:field="*{uuid}" type="hidden">
                <div class="form-group">
                    <label class="col-sm-3 control-label">订单发起人id：</label>
                    <div class="col-sm-8">
                        <input name="fromId" th:field="*{fromId}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">订单类型：</label>
                    <div class="col-sm-8">
                        <p class="form-chat" th:text="${@dict.getLabel('order_type',ddOrder.orderType)}"></p>
                        <!--                <select name="orderType" class="form-control m-b">-->
                        <!--                    <option value="">所有</option>-->
                        <!--                </select>-->
                        <!--                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>-->
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">发起人实名：</label>
                    <div class="col-sm-8">
                        <input name="fromName" th:field="*{fromName}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">起送地点：</label>
                    <div class="col-sm-8">
                        <input name="begin" th:field="*{begin}" class="form-control" type="text">
                        <a href="#googleMap" class="help-block m-b-none">查看位置</a>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">目的地：</label>
                    <div class="col-sm-8">
                        <input name="end" th:field="*{end}" class="form-control" type="text">
                        <a href="#googleMap" class="help-block m-b-none">查看位置</a>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">骑手id：</label>
                    <div class="col-sm-8">
                        <input name="riderId" th:field="*{riderId}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">骑手姓名：</label>
                    <div class="col-sm-8">
                        <input name="riderName" th:field="*{riderName}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">送货路程：</label>
                    <div class="col-sm-8">
                        <input name="distance" th:field="*{distance}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">价格：</label>
                    <div class="col-sm-8">
                        <input name="money" th:field="*{money}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-3 control-label">规格：</label>
                    <div class="col-sm-8">
                        <input name="specs" th:field="*{specs}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">支付方式：</label>
                    <div class="col-sm-8">
                        <input name="pay" th:field="*{pay}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">起送时间：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input name="beginTime" th:value="${#dates.format(ddOrder.beginTime, 'yyyy-MM-dd')}"
                                   class="form-control" placeholder="yyyy-MM-dd" type="text">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">结束时间：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input name="endTime" th:value="${#dates.format(ddOrder.endTime, 'yyyy-MM-dd')}"
                                   class="form-control" placeholder="yyyy-MM-dd" type="text">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">本单评价：</label>
                    <div class="col-sm-8">
                        <input name="star" th:field="*{star}" class="form-control" type="text">
                    </div>
                </div>
            </div>
        </div>
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-3 control-label">是否结束订：</label>-->
        <!--            <div class="col-sm-8">-->
        <!--                <div class="radio-box">-->
        <!--                    <input type="radio" name="status" value="">-->
        <!--                    <label th:for="status" th:text="未知"></label>-->
        <!--                </div>-->
        <!--                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>-->
        <!--            </div>-->
        <!--        </div>-->

        <!--        <div class="form-group">-->
        <!--            <gm-map options="{center: [40.750, -73], zoom: 9}">-->
        <!--                <gm-directions destination="destination" options="{origin: '48 Pirrama Road, Pyrmont NSW',destination:[-33.9,151.23],  travelMode: google.maps.DirectionsTravelMode.DRIVING}">-->
        <!--                    <gm-renderer options="{polylineOptions:{strokeColor: '#0077c4', strokeWeight: 4, strokeOpacity: 1.0}}"></gm-renderer>-->
        <!--                </gm-directions>-->
        <!--            </gm-map>-->
        <!--        </div>-->
        <div class="form-group">
            <div id="googleMap" class="col-sm-12" style="height: 500px"></div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLYLV3RvsHwdlLc2Hl8PFBrKQanyCkwFk&callback=initMap" async defer></script>-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLYLV3RvsHwdlLc2Hl8PFBrKQanyCkwFk&callback=initMap"
        async defer></script>
<script>


</script>
<!--<script>angular.module('MyApp', ['GoogleMapsNative']).config(function(gmLibraryProvider) {-->
<!--    gmLibraryProvider.configure({-->
<!--        language: 'en',-->
<!--        key:'AIzaSyBLYLV3RvsHwdlLc2Hl8PFBrKQanyCkwFk'-->
<!--    });-->
<!--});</script>-->

<script type="text/javascript">
    var prefix = ctx + "system/order";
    var map;
    var markers = [
        {
            position: {
                lat: [[${ddOrder.beginLat}]],
                lng: [[${ddOrder.beginLng}]]
            },
            label: "取件地点",
            title: "起始地点",
        },
        {
            position: {
                lat: [[${ddOrder.endLat}]],
                lng: [[${ddOrder.endLng}]]
            },
            label: "送达地点",
            title: "送达地点",
        },
    ]
    // var data = {
    //     beginLat
    // }
    // console.log(data);
    function initMap() {
        map = new google.maps.Map(document.getElementById('googleMap'), {
            center: {lat: [[${ddOrder.beginLat}]], lng: [[${ddOrder.beginLng}]]},
            zoom: 14
        });
        for (var i = 0; i < markers.length; i++){
            var marker = new google.maps.Marker({
                position: markers[i].position,
                map: map,
                animation: google.maps.Animation.DROP,
                title: markers[i].title,
                label: markers[i].label,
            });
        }

    }


    $("#form-order-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-order-edit').serialize());
        }
    }

    $("input[name='beginTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='endTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
</script>
</body>
</html>